<template>
	<view class="loadingPages">
		<image class="loadingPagesImg" src="/static/img/logoLoading.png"></image>
		<view class="loadingPagesBody">
			<view class="loadingText"
				:style="{opacity: loadingIndex>=0?1:0,color: loadingIndex==0?'#001951':'#a3acc0'}">
				数据调用：章鱼小数据餐饮OSD大数据库
			</view>
			<view class="loadingText"
				:style="{opacity: loadingIndex>=1?1:0,color: loadingIndex==1?'#001951':'#a3acc0'}">
				<p>在全国餐饮平台、收银及消费者大数据整合和</p>
				<p>深度标签基础上，叠加算法、模型和人工智能技术…</p>
			</view>
			<view class="loadingText"
				:style="{opacity: loadingIndex>=2?1:0,color: loadingIndex==2?'#001951':'#a3acc0'}">
				<p>数据覆盖：120+城市 300+品类 200万+门店</p>
				<p>3000万+菜品 4000+食材 198+风味 167+烹饪手法</p>
				<p>110+标签 80+模型 400+算法</p>
			</view>
			<view class="loadingText"
				:style="{opacity: loadingIndex>=3?1:0,color: loadingIndex==3?'#001951':'#a3acc0'}">
				正在启动人工智能引擎输出结论
			</view>
		</view>
		<view :style="{bottom : `${myBottom}%`}" class="loadingPagesEnds">更新频率：每月一次</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loadingIndex: -1
			}
		},
		props: {
			// 0未通过，1正在加载，2通过
			isLoading: {
				type: Number,
				default: 0
			},
			myBottom: {
				type: Number,
				default: 6
			}
		},
		watch: {
			isLoading: {
				immediate: true,
				handler(newVal) {
					if (newVal == 1) {
						let myTime = null;
						myTime = setInterval(() => {
							this.loadingIndex++;
							if (this.loadingIndex == 3) {
								clearInterval(myTime);
								setTimeout(() => {
									this.$emit('updataIsLoading', 2)
								}, 1000)
							}
						}, 800)
					}
				}
			}

		},
		computed: {
			search() {
				return this.$store.state.search;
			},
		},
		methods: {


		}
	}
</script>

<style lang="scss" scoped>
	.loadingPages {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;

		.loadingPagesImg {
			width: 382rpx;
			height: 204rpx;
			margin-top: 200rpx;
		}

		.loadingPagesBody {
			margin-top: 62rpx;
			padding: 0 48rpx;

			.loadingText {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 550;
				line-height: 40rpx;
				color: #a3acc0;
				margin-top: 32rpx;
				opacity: 0;
				transition: all .5s;
			}

			.blocks {
				opacity: 1;
			}

			.act {
				color: #001951;

			}
		}

		.loadingPagesEnds {
			width: 100%;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #272727;
			position: absolute;


			text-align: center;

		}
	}
</style>
